<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/style.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>

</head>
<body class="container" style="font-family: '微软雅黑 Light'">

<div class="col-md-offset-1" style="padding-bottom: 50px;font-family: 幼圆">
    <h1 style="padding-top: 10px;color: #0a0a0a">购物车</h1><hr>
    <h4 style="color: cornflowerblue;">全部商品</h4>
    <div class="row" style="height: 50px; background-color:#e2e2e2">
        <div class="col-md-offset-3 col-md-3"><label style="padding-top: 14px">商品信息</label></div>
        <div class="col-md-offset-2 col-md-1"><label style="padding-top: 14px">单价(万)</label></div>
        <div class="col-md-1"><label style="padding-top: 14px">数量</label></div>
        <div class="col-md-1"><label style="padding-top: 14px">金额(万)</label></div>
        <div class="col-md-1"><label style="padding-top: 14px">操作</label></div>
    </div>
    <div id="com"></div>
<!--&lt;!&ndash;商品信息&ndash;&gt;-->
<!--    <div class="row" style="padding-top: 5px;padding-bottom: 5px;">-->
<!--&lt;!&ndash;        商品信息&ndash;&gt;-->
<!--        <div class="col-sm-12" style="border: #dddddd 1px solid">-->
<!--            <div class="col-sm-3">-->
<!--                <img id="img" src="../../images/A41.jpg" width="216" height="162"/>-->
<!--            </div>-->
<!--            <div class="col-sm-3" style="font-family: 幼圆">-->
<!--                <label style="padding-top: 30px">奥迪A4L 2020款 35 TFSI 时尚动感型</label><br>-->
<!--                <label style="font-size: 5px;color: gray">官方建议零售价￥305,580</label><br>-->
<!--                <select id="dealer" style="border: none;outline: none;background-color:#f2f2f2;height: 50px;width: 250px">-->
<!--                    <option>请选择经销商</option>-->
<!--                    <option>天津宝泽行汽车销售服务有限公司</option>-->
<!--                    <option>天津星德宝汽车销售服务有限公司</option>-->
<!--                    <option>天津宝诚百旺汽车销售服务有限公司</option>-->
<!--                    <option>天津宝晋行汽车销售服务有限公司</option>-->
<!--                    <option>天津宝信行汽车销售服务有限公司</option>-->
<!--                    <option>天津博瑞宝汽车销售服务有限公司</option>-->
<!--                    <option>天津美宝行汽车销售服务有限公司</option>-->
<!--                </select>-->
<!--            </div>-->
<!--            &lt;!&ndash;        单价&ndash;&gt;-->
<!--            <div class="col-md-offset-1 col-md-2" style="padding-left: 90px">-->
<!--                <label style="padding-top: 54px ;color: cornflowerblue">￥10,190</label><br>-->
<!--                <a href="/gotoyhCalculator" style="font-size: smaller; color: gray">金融计算器</a>-->
<!--            </div>-->
<!--            &lt;!&ndash;        数量&ndash;&gt;-->
<!--            <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 23px">1</label></div>-->
<!--            &lt;!&ndash;        金额&ndash;&gt;-->
<!--            <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 0px;color: cornflowerblue">￥10,190</label></div>-->
<!--            &lt;!&ndash;        操作&ndash;&gt;-->
<!--            <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 13px"><a>删除</a></label></div>-->
<!--        </div>-->
<!--    </div>-->

<!--脚部-->
    <div class="row" style="height: 50px; background-color:#e2e2e2;font-family: 幼圆">
        <div class="col-md-offset-6">
            <label class="col-sm-offset-3 col-sm-3" style="padding-top: 15px;font-size: larger">总金额(万)</label>
            <label id="allmoney" class="col-sm-3" style="padding-top: 15px; color: cornflowerblue;font-size: larger">￥</label>
            <button id="jiesuan" class="jiesuan col-sm-3" style="background-color: crimson; height:50px;font-size: 20px;color: ghostwhite">结算</button>
        </div>
    </div>
</div>
</body>
<script>
    var html="";
    var AllMoney=0;
    $(document).ready(function () {
        showShop();
        function showShop(){
            if(sessionStorage.getItem("u_id")!=null){
                $.ajax({
                    url: "../../shopcar/selectAllById",
                    type: "get",
                    dataType: "json",
                    data: {
                        u_id: sessionStorage.getItem("u_id")
                    },
                    success: function (result) {
                        var html = "";

                        if (result.length==0){
                            html+="<hr><label style='font-size: 20px;color: crimson'>您目前还没有购物商品</label><br>" +
                                "<a style='font-size: 15px; color: darkgrey' href='\gotoyhBuy'>点击此处跳转到商城</a><hr>";

                            document.getElementById("jiesuan").disabled = true;
                            $("#jiesuan").css("background-color","darkgrey");
                        }
                        for (var i = 0; i < result.length; i++) {

                            html+=
                                "<!--商品信息-->\n" +
                                "    <div class=\"row\" style=\"padding-top: 5px;padding-bottom: 5px;\">\n" +
                                "<!--        商品信息-->\n" +
                                "        <div class=\"col-sm-12\" style=\"border: #dddddd 1px solid\">\n" +
                                "            <div class=\"col-sm-3\">\n" +
                                "                <img id=\"img\" src=\\" + result[i].c_surface + " width=\"216\" height=\"162\"/>\n" +
                                "            </div>\n" +
                                "            <div class=\"col-sm-3\" style=\"font-family: 幼圆\">\n" +
                                "                <label style=\"padding-top: 30px\">"+result[i].c_name+"</label><br>\n" +
                                "                <label style=\"font-size: 5px;color: gray\">官方建议零售价￥"+result[i].c_price+"万</label><br>\n" +
                                    " <label style=\"font-size: 15px;color: #321c69;height: 50px\">经销商:"+result[i].c_dealer+"万</label><br>\n"+
                                // "                <select id=\"c_dealer"+i+"\" style=\"border: none;outline: none;background-color:#f2f2f2;height: 50px;width: 250px\">\n" +
                                // "                    <option>请选择经销商</option>\n" +
                                // "                    <option>天津宝泽行汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津星德宝汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津宝诚百旺汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津宝晋行汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津宝信行汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津博瑞宝汽车销售服务有限公司</option>\n" +
                                // "                    <option>天津美宝行汽车销售服务有限公司</option>\n" +
                                // "                </select>\n" +
                                "            </div>\n" +
                                "            <!--        单价-->\n" +
                                "            <div class=\"col-md-offset-1 col-md-2\" style=\"padding-left: 90px\">\n" +
                                "                <label style=\"padding-top: 54px ;color: cornflowerblue\">￥"+result[i].c_fri_price+"</label><br>\n" +
                                "                <a href=\"/gotoyhCalculator\" style=\"font-size: smaller; color: gray\">金融计算器</a>\n" +
                                "            </div>\n" +
                                "            <!--        数量-->\n" +
                                "            <div class=\"col-md-1\"><label style=\"font-size: smaller;padding-top: 70px;padding-left: 23px\">1</label></div>\n" +
                                "            <!--        金额-->\n" +
                                "            <div class=\"col-md-1\"><label style=\"font-size: smaller;padding-top: 70px;padding-left: 0px;color: cornflowerblue\">￥"+result[i].c_fri_price+"</label></div>\n" +
                                "            <!--        操作-->\n" +
                                "            <div class=\"col-md-1\"><label style=\"font-size: smaller;padding-top: 70px;padding-left: 13px\"><a id='"+result[i].c_id+"' class='del'>删除</a></label></div>\n" +
                                "        </div>\n" +
                                "    </div>\n" +
                                "\n";
                            AllMoney+=result[i].c_fri_price;
                        }

                        $("#com").html(html);
                        $("#allmoney").text("￥"+AllMoney.toFixed(2))

                    }

                })

            }else {
                alert("请先登录");
                document.getElementById("jiesuan").disabled = true;
                $("#jiesuan").css("background-color","darkgrey");
            }
        }


        $(document).on("click",".del",function () {
            sessionStorage.setItem("c_id",$(this).attr("id"));
            $.ajax({
                url: "../../shopcar/deleteShop",
                type: "get",
                dataType: "json",
                data: {
                    c_id: sessionStorage.getItem("c_id")
                },
                success: function (result) {
                    html="";
                    AllMoney=0;
                    showShop();
                }
            })
        })

        $(document).on("click",".jiesuan",function () {
            $(location).attr("href","/gotoyhJieSuan");
        })
    })

</script>
</html>